<table width="100%">
    <tr class="calendarx">
        <td width="68.5%">
            <div id ="resultadoreservasbydoctor">
                resultado
            </div>

        </td>

        <td width="31.5%">
            <form id="FormListarbyDoctor" name="FormListarbyDoctor" action="<?php echo url_for("@default?module=reserva&action=listarxdoctor") ?>" method="post">
                <table>
                    <tbody>
                        <tr>
                            <label>Doctor:</label>
                            <select name="personal_id" id="personal_id">
                                <?php foreach ($gestdent_personal_list as $gestdent_personal): ?>
                                    <?php echo ("<option value='" . $gestdent_personal->getId()."'>") ?>
                                    <?php echo $gestdent_personal; ?>
                                    <?php echo ("</option>") ?>
                                <?php endforeach; ?>
                            </select>
                        </tr>

                        <tr>
                            <input name="fecha" id="fecha" type="hidden"/>
                            <div id="calendar"/>
                        </tr>

                        <tr>
                            <br/><div class="boton"><input id="boton_aceptar" name="boton_aceptar" type="submit" value="Aceptar" /></div>
                        </tr>

                        <tr>
                            <div id="ajax_loader">
                                <?php echo image_tag('/images/loader.gif', array("style" => "display: none","id" =>"loader_gif")); ?>
                            </div>
                        </tr>
                    </tbody>
                </table>
            </form>
        </td>
    </tr>
</table>


<script type="text/javascript">

        // esperamos que el DOM cargue
        $(document).ready(function() {
            // definimos las opciones del plugin AJAX FORM
            var opciones= {
                               beforeSubmit: mostrarLoader, //funcion que se ejecuta antes de enviar el form
                               success: mostrarRespuesta //funcion que se ejecuta una vez enviado el formulario
            };
             //asignamos el plugin ajaxForm al formulario myForm y le pasamos las opciones
            $('#FormListarbyDoctor').ajaxForm(opciones) ;



             //lugar donde defino las funciones que utilizo dentro de "opciones"
             function mostrarLoader(){

                          $("#boton_aceptar").hide();
                          $("#loader_gif").show(); //muestro el loader de ajax

                          var FechaCalendario = new Date(Date.parse($("div#calendar").datepicker('getDate')));


                          var FechaTexto = FechaCalendario.toLocaleDateString();


                          // malo porque saca el value del selec   var SucursalTexto = document.FormAgenda.AgendaSucursal.selecteditem();

                          $("#titulo-agenda").text(FechaTexto.toUpperCase());


             };

             function mostrarRespuesta (responseText){
                           //alert("Mensaje enviado: "+responseText);  //responseText es lo que devuelve la página contacto.php. Si en contacto.php hacemos echo "Hola" , la variable responseText = "Hola" . Aca hago un alert con el valor de response text

                          $("#loader_gif").hide();
                          $("#boton_aceptar").show();
                          $("#resultadoreservasbydoctor").html(responseText + "<br/>");

             };

        });

</script>


<!-- SCRIPT DEL CALENDARIO -->
<script type="text/javascript">
    $(document).ready(function(){
        $("div#calendar").datepicker({
            altField: 'input#fecha',
            altFormat: 'yy-mm-dd',
            inline: true,
            firstDay: 1
        });
    });
</script>


<!-- SCRIPT QUE RECARGA CONTENIDO DE UN DIV -->
<script type="text/javascript">
function ReloadDiv(div,data){
    var variable_post= data.toString();
    $(div).html(variable_post);
}
</script>


<!-- MANEJA BOTON JQUERY -->
<script type="text/javascript">
    $(function() {
        $( "button, input:submit, a", ".boton" ).button();
        $( "a", ".demo" ).click(function() { return false; });
    });
</script>


<!-- CSS -->
<style type="text/css">
/* Vertical Tabs
----------------------------------*/
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: right; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: right; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
.ui-tabs-vertical .ui-tabs-nav li a.nikon {background:url(http://localhost/gestdent/web/images/under_construction.jpg);}
.ui-tabs-vertical .ui-tabs-nav li a.canon {background:url(canon.png);}
.ui-tabs-vertical .ui-tabs-nav li a.pentax {background:url(pentax.png);}
</style>